<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>灵知库管理系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>

    <!-- Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0FC6C2',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        info: '#86909C',
                        light: '#F2F3F5',
                        dark: '#1D2129',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                },
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }

            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }

            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }

            .transition-custom {
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
        }
    </style>
</head>

<body class="font-inter bg-gray-50 text-dark">
<div class="flex h-screen overflow-hidden">
    <!-- 侧边栏 -->
    <aside class="w-64 bg-white shadow-lg hidden md:block transition-all duration-300 ease-in-out">
        <div class="flex items-center justify-between h-16 px-4 border-b">
            <div class="flex items-center space-x-2">
                <i class="fa fa-book text-primary text-2xl"></i>
                <h1 class="text-xl font-bold text-primary">灵知库管理系统</h1>
            </div>
            <button class="md:hidden text-gray-500 hover:text-primary">
                <i class="fa fa-times"></i>
            </button>
        </div>

        <nav class="p-4">
            <ul class="space-y-1">
                <li>
                    <a href="#" class="flex items-center px-4 py-3 text-gray-700 rounded-lg bg-primary/10 text-primary">
                        <i class="fa fa-home w-5 h-5 mr-3"></i>
                        <span>仪表盘</span>
                    </a>
                </li>
                <li>
                    <a href="#"
                       class="flex items-center px-4 py-3 text-gray-700 rounded-lg hover:bg-gray-100 transition-custom">
                        <i class="fa fa-file-text-o w-5 h-5 mr-3"></i>
                        <span>文档管理</span>
                    </a>
                </li>
                <li>
                    <a href="#"
                       class="flex items-center px-4 py-3 text-gray-700 rounded-lg hover:bg-gray-100 transition-custom">
                        <i class="fa fa-tags w-5 h-5 mr-3"></i>
                        <span>标签管理</span>
                    </a>
                </li>
                <li>
                    <a href="#"
                       class="flex items-center px-4 py-3 text-gray-700 rounded-lg hover:bg-gray-100 transition-custom">
                        <i class="fa fa-users w-5 h-5 mr-3"></i>
                        <span>用户管理</span>
                    </a>
                </li>
                <li>
                    <a href="#"
                       class="flex items-center px-4 py-3 text-gray-700 rounded-lg hover:bg-gray-100 transition-custom">
                        <i class="fa fa-cog w-5 h-5 mr-3"></i>
                        <span>系统设置</span>
                    </a>
                </li>
            </ul>
        </nav>
    </aside>

    <!-- 主内容区 -->
    <div class="flex-1 flex flex-col overflow-hidden">
        <!-- 顶部导航 -->
        <header class="bg-white shadow-sm z-10">
            <div class="flex items-center justify-between h-16 px-4">
                <div class="flex items-center">
                    <button class="mr-2 text-gray-500 md:hidden" id="sidebar-toggle">
                        <i class="fa fa-bars"></i>
                    </button>
                    <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3">
                                <i class="fa fa-search text-gray-400"></i>
                            </span>
                        <input type="text" placeholder="搜索文档..."
                               class="pl-10 pr-4 py-2 rounded-lg border focus:outline-none focus:ring-2 focus:ring-primary/50 w-64">
                    </div>
                </div>

                <div class="flex items-center space-x-4">
                    <button class="relative p-2 text-gray-500 hover:text-primary rounded-full hover:bg-gray-100 transition-custom">
                        <i class="fa fa-bell"></i>
                        <span class="absolute top-1 right-1 w-2 h-2 bg-danger rounded-full"></span>
                    </button>
                    <button class="relative p-2 text-gray-500 hover:text-primary rounded-full hover:bg-gray-100 transition-custom">
                        <i class="fa fa-envelope"></i>
                        <span class="absolute top-1 right-1 w-2 h-2 bg-primary rounded-full"></span>
                    </button>
                    <div class="flex items-center space-x-2">
                        <img src="https://picsum.photos/id/1005/200/200" alt="用户头像"
                             class="w-8 h-8 rounded-full object-cover">
                        <span class="hidden md:inline-block">管理员</span>
                    </div>
                </div>
            </div>
        </header>

        <!-- 内容区域 -->
        <main class="flex-1 overflow-y-auto p-4 bg-gray-50">
            <div class="max-w-7xl mx-auto">
                <!-- 页面标题 -->
                <div class="mb-6">
                    <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-800">文档管理</h2>
                    <p class="text-gray-600">上传和管理知识库文档</p>
                </div>

                <!-- 统计卡片 -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
                    <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100 transform hover:scale-[1.02] transition-custom">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-gray-500 text-sm">文档总数</p>
                                <h3 class="text-2xl font-bold mt-1" id="total-docs">0</h3>
                            </div>
                            <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center">
                                <i class="fa fa-file-text-o text-primary text-xl"></i>
                            </div>
                        </div>
                        <div class="mt-4 flex items-center text-sm">
                                <span class="text-success flex items-center">
                                    <i class="fa fa-arrow-up mr-1"></i> 12%
                                </span>
                            <span class="text-gray-500 ml-2">较上月</span>
                        </div>
                    </div>

                    <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100 transform hover:scale-[1.02] transition-custom">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-gray-500 text-sm">本月新增</p>
                                <h3 class="text-2xl font-bold mt-1" id="new-docs">0</h3>
                            </div>
                            <div class="w-12 h-12 rounded-full bg-secondary/10 flex items-center justify-center">
                                <i class="fa fa-plus text-secondary text-xl"></i>
                            </div>
                        </div>
                        <div class="mt-4 flex items-center text-sm">
                                <span class="text-success flex items-center">
                                    <i class="fa fa-arrow-up mr-1"></i> 8%
                                </span>
                            <span class="text-gray-500 ml-2">较上月</span>
                        </div>
                    </div>

                    <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100 transform hover:scale-[1.02] transition-custom">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-gray-500 text-sm">文档大小</p>
                                <h3 class="text-2xl font-bold mt-1" id="total-size">0 MB</h3>
                            </div>
                            <div class="w-12 h-12 rounded-full bg-warning/10 flex items-center justify-center">
                                <i class="fa fa-database text-warning text-xl"></i>
                            </div>
                        </div>
                        <div class="mt-4 flex items-center text-sm">
                                <span class="text-danger flex items-center">
                                    <i class="fa fa-arrow-up mr-1"></i> 24%
                                </span>
                            <span class="text-gray-500 ml-2">较上月</span>
                        </div>
                    </div>

                    <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100 transform hover:scale-[1.02] transition-custom">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-gray-500 text-sm">处理中</p>
                                <h3 class="text-2xl font-bold mt-1" id="processing-docs">0</h3>
                            </div>
                            <div class="w-12 h-12 rounded-full bg-info/10 flex items-center justify-center">
                                <i class="fa fa-spinner text-info text-xl"></i>
                            </div>
                        </div>
                        <div class="mt-4 flex items-center text-sm">
                                <span class="text-success flex items-center">
                                    <i class="fa fa-arrow-down mr-1"></i> 5%
                                </span>
                            <span class="text-gray-500 ml-2">较上月</span>
                        </div>
                    </div>
                </div>

                <!-- 新增：URL 输入框和按钮 -->
                <div class="bg-white rounded-xl shadow-sm p-6 mb-6 border border-gray-100">
                    <h3 class="text-lg font-semibold mb-4">通过 URL 获取文本</h3>
                    <div class="flex items-center mb-4 space-x-4">
                        <div class="flex items-center">
                            <input type="radio" id="url-type-confluence" name="url-type" value="confluence" checked
                                   class="w-4 h-4 text-primary focus:ring-primary border-gray-300">
                            <label for="url-type-confluence"
                                   class="ml-2 text-sm font-medium text-gray-700">Confluence</label>
                        </div>
                        <div class="flex items-center">
                            <input type="radio" id="url-type-web" name="url-type" value="web"
                                   class="w-4 h-4 text-primary focus:ring-primary border-gray-300">
                            <label for="url-type-web" class="ml-2 text-sm font-medium text-gray-700">Web URL</label>
                        </div>
                        <div class="flex items-center">
                            <input type="radio" id="url-type-dir" name="url-type" value="serverPath"
                                   class="w-4 h-4 text-primary focus:ring-primary border-gray-300">
                            <label for="url-type-web" class="ml-2 text-sm font-medium text-gray-700">Server Path</label>
                        </div>
                        <p>注：路径后可增加 <code class="bg-gray-100 px-1 py-0.5 rounded text-gray-700">&username=用户名&password=密码</code>
                            认证参数</p>
                    </div>
                    <div class="flex items-center space-x-4">
                        <input type="text" id="url-input" placeholder="输入 Confluence 或 Web URL"
                               class="pl-3 pr-4 py-2 rounded-lg border focus:outline-none focus:ring-2 focus:ring-primary/50 flex-1">
                        <button id="fetch-url-btn"
                                class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                            获取文本
                        </button>
                    </div>
                    <div id="url-success" class="mt-4 hidden">
                        <div class="bg-success/10 border border-success/30 text-success px-4 py-3 rounded-lg flex items-center">
                            <i class="fa fa-check-circle mr-3"></i>
                            <div>
                                <p class="font-medium">解析成功</p>
                                <p class="text-sm">文件ID: <span id="url-success-id"></span></p>
                            </div>
                        </div>
                    </div>
                    <div id="url-error" class="mt-4 hidden">
                        <div class="bg-danger/10 border border-danger/30 text-danger px-4 py-3 rounded-lg flex items-center">
                            <i class="fa fa-exclamation-circle mr-3"></i>
                            <p class="font-medium">获取文本失败，请检查 URL 或稍后再试</p>
                        </div>
                    </div>
                </div>

                <!-- 文档上传区域 -->
                <div class="bg-white rounded-xl shadow-sm p-6 mb-6 border border-gray-100">
                    <h3 class="text-lg font-semibold mb-4">上传文档</h3>
                    <div id="upload-container"
                         class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-primary transition-custom cursor-pointer">
                        <i class="fa fa-cloud-upload text-4xl text-gray-400 mb-4"></i>
                        <p class="text-gray-600 mb-2">拖放文件到此处，或<span class="text-primary">点击上传</span></p>
                        <p class="text-sm text-gray-500">支持格式：txt、word、pdf、ppt、excel、csv、图片</p>
                        <input type="file" id="file-upload" class="hidden" multiple
                               accept=".txt,.docx,.doc,.pdf,.ppt,.pptx,.xls,.xlsx,.csv,.jpg,.jpeg,.png,.gif">
                    </div>

                    <!-- 上传进度条 -->
                    <div id="upload-progress-container" class="mt-4 hidden">
                        <div class="flex items-center justify-between mb-1">
                            <span class="text-sm font-medium text-gray-700" id="upload-file-name">上传中...</span>
                            <span class="text-sm text-gray-500" id="upload-percentage">0%</span>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-2.5">
                            <div id="upload-progress-bar" class="bg-primary h-2.5 rounded-full" style="width: 0%"></div>
                        </div>
                    </div>

                    <!-- 上传成功消息 -->
                    <div id="upload-success" class="mt-4 hidden">
                        <div class="bg-success/10 border border-success/30 text-success px-4 py-3 rounded-lg flex items-center">
                            <i class="fa fa-check-circle mr-3"></i>
                            <div>
                                <p class="font-medium">上传成功</p>
                                <p class="text-sm">文件ID: <span id="uploaded-file-id"></span></p>
                            </div>
                        </div>
                    </div>

                    <!-- 上传失败消息 -->
                    <div id="upload-error" class="mt-4 hidden">
                        <div class="bg-danger/10 border border-danger/30 text-danger px-4 py-3 rounded-lg flex items-center">
                            <i class="fa fa-exclamation-circle mr-3"></i>
                            <p class="font-medium">上传失败，请重试</p>
                        </div>
                    </div>
                </div>

                <!-- 文档列表 -->
                <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
                    <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
                        <h3 class="text-lg font-semibold">文档列表</h3>
                        <div class="flex items-center space-x-2 mt-4 md:mt-0">
                            <div class="relative">
                                <select class="pl-3 pr-10 py-2 rounded-lg border focus:outline-none focus:ring-2 focus:ring-primary/50 bg-white appearance-none">
                                    <option>全部类型</option>
                                    <option>文本文件</option>
                                    <option>演示文档</option>
                                    <option>电子表格</option>
                                    <option>图片</option>
                                </select>
                                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                                    <i class="fa fa-chevron-down text-xs"></i>
                                </div>
                            </div>
                            <div class="relative">
                                <select class="pl-3 pr-10 py-2 rounded-lg border focus:outline-none focus:ring-2 focus:ring-primary/50 bg-white appearance-none">
                                    <option>最近上传</option>
                                    <option>名称排序</option>
                                    <option>大小排序</option>
                                    <option>类型排序</option>
                                </select>
                                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                                    <i class="fa fa-chevron-down text-xs"></i>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 表格 -->
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead>
                            <tr>
                                <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    文件ID
                                </th>
                                <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    文件名
                                </th>
                                <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    类型
                                </th>
                                <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    大小
                                </th>
                                <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    上传日期
                                </th>
                                <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    关键字
                                </th>
                                <th class="px-4 py-3 bg-gray-50 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    操作
                                </th>
                            </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200" id="documents-table-body">
                            <!-- 表格内容将通过JavaScript动态生成 -->
                            <tr class="text-center">
                                <td colspan="7" class="px-4 py-8 text-gray-500">
                                    <div class="flex flex-col items-center">
                                        <i class="fa fa-folder-open-o text-4xl mb-3 text-gray-300"></i>
                                        <p>暂无文档，请上传文档</p>
                                    </div>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>

                    <!-- 分页 -->
                    <div class="flex items-center justify-between px-4 py-3 sm:px-6 mt-4">
                        <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                            <div>
                                <p class="text-sm text-gray-700">
                                    显示 <span class="font-medium">1</span> 到 <span class="font-medium">0</span> 条，共 <span
                                        class="font-medium" id="total-docs-pagination">0</span> 条记录
                                </p>
                            </div>
                            <div>
                                <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px"
                                     aria-label="Pagination">
                                    <a href="#"
                                       class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                        <span class="sr-only">上一页</span>
                                        <i class="fa fa-chevron-left text-xs"></i>
                                    </a>
                                    <a href="#"
                                       class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-primary text-sm font-medium text-white">
                                        1
                                    </a>
                                    <a href="#"
                                       class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                                        2
                                    </a>
                                    <a href="#"
                                       class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                                        3
                                    </a>
                                    <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
                                            ...
                                        </span>
                                    <a href="#"
                                       class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                        <span class="sr-only">下一页</span>
                                        <i class="fa fa-chevron-right text-xs"></i>
                                    </a>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</div>

<!-- 文档详情模态框 -->
<div id="document-detail-modal" class="fixed inset-0 z-50 overflow-y-auto hidden">
    <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 transition-opacity" aria-hidden="true">
            <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
        </div>
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
        <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full">
            <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                <div class="sm:flex sm:items-start">
                    <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
                        <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4 flex items-center justify-between">
                            <span>文档详情</span>
                            <button type="button" class="text-gray-400 hover:text-gray-500 focus:outline-none"
                                    id="close-detail-modal">
                                <i class="fa fa-times"></i>
                            </button>
                        </h3>

                        <!-- 文档详情加载中状态 -->
                        <div id="document-detail-loading" class="text-center py-16">
                            <div class="inline-block h-8 w-8 animate-spin rounded-full border-4 border-primary/20 border-t-primary"></div>
                            <p class="mt-3 text-gray-500">正在加载文档详情...</p>
                        </div>

                        <!-- 文档详情内容 -->
                        <div id="document-detail-content" class="hidden">
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                                <div>
                                    <p class="text-sm text-gray-500 mb-1">文件ID</p>
                                    <p class="font-medium" id="detail-file-id">-</p>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-500 mb-1">工作区</p>
                                    <p class="font-medium" id="detail-workspace">-</p>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-500 mb-1">作者</p>
                                    <p class="font-medium" id="detail-author">-</p>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-500 mb-1">原始文件名</p>
                                    <p class="font-medium" id="detail-filename">-</p>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-500 mb-1">创建日期</p>
                                    <p class="font-medium" id="detail-creation-date">-</p>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-500 mb-1">页数</p>
                                    <p class="font-medium" id="detail-page-count">-</p>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-500 mb-1">字符数</p>
                                    <p class="font-medium" id="detail-char-count">-</p>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-500 mb-1">单词数</p>
                                    <p class="font-medium" id="detail-word-count">-</p>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-500 mb-1">句子数</p>
                                    <p class="font-medium" id="detail-sentence-count">-</p>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-500 mb-1">关键词</p>
                                    <div class="flex flex-wrap gap-2" id="detail-keywords">
                                        <!-- 关键词将动态生成 -->
                                    </div>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-500 mb-1">处理状态</p>
                                    <div class="flex flex-wrap gap-2" id="process-status">
                                        <!-- 动态生成 -->
                                    </div>
                                </div>
                            </div>

                            <div>
                                <p class="text-sm text-gray-500 mb-2">文本内容</p>
                                <div id="detail-text"
                                     class="bg-gray-50 p-4 rounded-lg h-64 overflow-y-auto scrollbar-hide text-gray-700">
                                    <!-- 文本内容将动态生成 -->
                                </div>
                            </div>
                        </div>

                        <!-- 文档详情加载失败状态 -->
                        <div id="document-detail-error" class="text-center py-16 hidden">
                            <i class="fa fa-exclamation-triangle text-4xl text-warning mb-3"></i>
                            <p class="mt-3 text-gray-700">加载文档详情失败</p>
                            <p class="mt-2 text-sm text-gray-500">服务器可能暂时不可用，请稍后再试</p>
                            <button type="button"
                                    class="mt-4 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"
                                    id="retry-load-detail">
                                重试
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                <button type="button"
                        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary text-base font-medium text-white hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary sm:ml-3 sm:w-auto sm:text-sm"
                        id="close-detail-modal-btn">
                    关闭
                </button>
            </div>
        </div>
    </div>
</div>

<div id="vector-detail-modal" class="fixed inset-0 z-50 overflow-y-auto hidden">
    <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 transition-opacity" aria-hidden="true">
            <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
        </div>
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
        <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full">
            <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                <div class="sm:flex sm:items-start">
                    <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
                        <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4 flex items-center justify-between">
                            <span>向量详情</span>
                            <button type="button" class="text-gray-400 hover:text-gray-500 focus:outline-none"
                                    id="close-vector-modal">
                                <i class="fa fa-times"></i>
                            </button>
                        </h3>

                        <!-- 向量详情加载中状态 -->
                        <div id="vector-detail-loading" class="text-center py-16">
                            <div class="inline-block h-8 w-8 animate-spin rounded-full border-4 border-primary/20 border-t-primary"></div>
                            <p class="mt-3 text-gray-500">正在加载向量详情...</p>
                        </div>

                        <!-- 向量详情内容 -->
                        <div id="vector-detail-content" class="hidden">
                            <div id="vector-list" class="mt-4"></div>
                        </div>

                        <!-- 向量详情加载失败状态 -->
                        <div id="vector-detail-error" class="text-center py-16 hidden">
                            <i class="fa fa-exclamation-triangle text-4xl text-warning mb-3"></i>
                            <p class="mt-3 text-gray-700">加载向量详情失败</p>
                            <p class="mt-2 text-sm text-gray-500">服务器可能暂时不可用，请稍后再试</p>
                            <button type="button"
                                    class="mt-4 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"
                                    id="retry-load-vector">
                                重试
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                <button type="button"
                        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary text-base font-medium text-white hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary sm:ml-3 sm:w-auto sm:text-sm"
                        id="close-vector-modal-btn">
                    关闭
                </button>
            </div>
        </div>
    </div>
</div>
<script src="index.js"></script>
</body>

</html>